<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>基础的get请求</h1>
  <form id="form" action="" method="">
    <input id="ipt" type="text">
    <button id="btn">输入学生id 查询他的详细信息</button>
  </form>
<script>
    const Btn = document.getElementById('btn');
    const Ipt = document.getElementById('ipt');
    const Form = document.getElementById('form');
    /* 
          表单提交事件的绑定方式:
        1.给按钮绑定点击事件
        2.给form元素绑定提交事件submit
        3.一般我们不用form的提交,所以需要在事件内阻止默认事件(1.e.preventDefault()  2.return false)
    */
//    Btn.onclick = function(e){
//     e.preventDefault()
//     console.log(1);
//    }

    Form.onsubmit = function(){
        const xhr = new XMLHttpRequest()
        xhr.open('get','http://127.0.0.1/1')
        xhr.send()
        xhr.onreadystatechange = function(){
            if (xhr.readyState===4) {
                console.log(JSON.parse(xhr.responseText));
            }
        }

        return false
    }
</script>
</body>
</html>